import React, { Component } from 'react';
import '../../styles/Cnav.css'
import { getCategorylist, getCategorySub } from '../../api/category'
import Cright from '../../styles/Cright.css'
import { withRouter } from 'react-router-dom';
class Cnav extends Component {
    state = {
        clist: [],
        currrentIndex: 0,
        rlist: [],

    }
    //左侧导航列表请求
    componentDidMount() {
        getCategorylist().then((res) => {
            // console.log(res.data.list);
            this.setState({
                clist: res.data.list
            })
        })
        //打开页面默认右侧的列表请求
        getCategorySub({id:225510}).then((res) => {
            this.setState({
                rlist: res.data.subcate.subcategory
            })
        })
    }

    //点击左侧导航高亮并且改变右侧渲染
    addActive(index, id) {
        this.setState({
            currrentIndex: index,
        })
        // console.log(id);
        //右侧列表请求
        getCategorySub({ id: id }).then((res) => {
            console.log(res.data.subcate.subcategory);
            this.setState({
                rlist: res.data.subcate.subcategory
            })
        })
    }
  //三级分类被点击的时候
  goGoods(id){
    // console.log(id);
  this.props.history.push({pathname:'/index/allgoods',state:{id:id}})
  }
    render() {
        return (
            <div className='content'>
                <div className='cnav'>
                    {this.state.clist.length!=0&&
                        this.state.clist.map((item, index) => {
                            return (
                                <div className={`itemli ${this.state.currrentIndex == index ? 'red' : ''}`}
                                    onClick={() => { this.addActive(index, item.id) }}
                                    key={index}>{item.name}</div>
                            )
                        })
                    }
                </div>
                <div className='Cright'>
                    {this.state.rlist.length!=0&&
                        this.state.rlist.map((item, index) => {
                            return (                               
                                <div className='cate' key={index}>
                                   <h3>{item.name}</h3>
                                    <div className='CitemBox'>
                                    {
                                        item.subNavs.map((Citem, index) => {
                                            return (
                                                <figure key={Citem.id} onClick={()=>{this.goGoods(Citem.id)}}>
                                                    <img src={Citem.pic} alt="" />
                                                    <figcaption>{Citem.name}</figcaption>
                                                </figure>
                                            )
                                        })
                                    }
                                    </div>
                                </div>
                            )
                        })
                    }
                </div>
            </div>
        );
    }
}

export default withRouter(Cnav);